<template>
    <div class="course-result-page">
        <div class="course" v-for="item in list" :key="item.id">
            <p class="title">{{ item.name }} {{ `${item.contents.length}个` }}</p>
            <div
                class="content"
                v-for="(val, i) in item.contents"
                :key="val.id"
            >
                <div class="item flex">
                    <div class="item-num">
                        {{ i + 1 > 9 ? i + 1 : `0${i + 1}` }}
                    </div>
                    <div class="item-content-box">
                        <div class="item-content">
                            <p class="item-title">{{ val.name }}</p>
                            <p class="item-desc">
                                {{ val.description }}
                            </p>
                        </div>
                        <div class="item-content" v-if="val.suggest">
                            <p class="item-title">学习建议&收获</p>
                            <div class="item-desc" v-html="val.suggest"></div>
                        </div>
                    </div>
                </div>
                <div
                    class="recommend"
                    v-if="val.recommends && val.recommends.length"
                >
                    <div class="top flex items-center">
                        <img
                            class="mr-2"
                            src="@/assets/images/course/tag.png"
                            alt=""
                        />
                        <p class="font-bold">推荐课程</p>
                    </div>
                    <div class="course-btn flex flex-col">
                        <el-button
                            v-for="(items, j) in val.recommends"
                            :key="j"
                            type="text">
                            <a :href="items.url" target="_blank">{{ items.name }}</a>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center btn-export">
            <el-button @click="onExport" type="text" class="btn"
                >下载团队学习计划（PDF）</el-button
            >
        </div>
        <p class="tip">将本页面的团队学习建议，以PDF文档形式下载到您本地使用。</p>
    </div>
</template>

<script>

export default {
    components: {
    },
    data() {
        return {
            id: '',
            idStr: '',
            list: [],
        };
    },
    methods: {
        fetchData() {
            let url = `../elective/content?themeId=${this.id}`;
            const ids = this.idStr.split(',') || [];

            for (const val of ids) {
                url += `&contentIds=${val}`;
            }

            API.get(url).then(res => {
                const list = res.abilitys || [];

                this.list = list;
            });
        },

        onExport() {
            const my = this.$store.state.my;

            if (!my || !my.account) {
                $ele.$message.warning('请先登录');
                this.$router.push({
                    name: 'login',
                    query: {
                        type: 'back',
                    },
                });
                return;
            }

            if (my && (my.company_id && my.permission.indexOf(11) === -1)) {
                return $ele.$message('进阶功能联系我们单独开通');
            }

            const list = this.list;
            let url = `${process.env.VUE_APP_API_PREFIX}elective/content/export?themeId=${this.id}`;

            for (const val of list) {
                for (const item of val.contents) {
                    url += `&contentIds=${item.id}`;
                }
            }

            window.location.href = url;
        },
    },
    mounted() {
        const id = this.$route.query.id;
        const idStr = this.$route.query.idStr;

        if (id) {
            this.id = id;
            this.idStr = idStr;
            this.fetchData();
        }
    },
};
</script>

<style lang="scss">
.course-result-page {
    $color74: rgb(74, 74, 74);
    margin-top: 14px;

    @media (max-width: 960px) {
        margin-top: 0;
    }

    .course {
        @media (max-width: 960px) {
            margin-bottom: 18px;
        }

        .title {
            padding: 30px 0;
            font-size: 24px;
            color: $color74;
            font-weight: bold;

            @media (max-width: 960px) {
                font-size: 18px;
                line-height: 25px;
                padding: 0;
                margin-bottom: 18px;
            }
        }
    }

    .item {
        width: 100%;
        padding: 17px 26px 20px 17px;
        box-sizing: border-box;
        background: rgb(249, 249, 249);
        border-radius: 5px;
        margin-bottom: 12px;

        @media (max-width: 960px) {
            padding: 14px 17px 20px 14px;
            margin-bottom: 10px;
        }

        .item-num {
            height: fit-content;
            font-size: 28px;
            line-height: 28px;
            color: rgb(215, 215, 215);
            margin-right: 17px;
            font-weight: bold;

            @media (max-width: 960px) {
                font-size: 20px;
                line-height: 22px;
                margin-right: 9px;
            }
        }

        .item-title {
            margin-bottom: 9px;
            line-height: 28px;
            color: $color74;

            @media (max-width: 960px) {
                font-size: 12px;
                line-height: 22px;
                margin-bottom: 5px;
            }
        }

        .item-desc {
            line-height: 22px;

            @media (max-width: 960px) {
                font-size: 12px;
                line-height: 17px;
            }
        }

        .item-content-box {
            width: inherit;
        }

        .item-content {
            padding: 16px 0 22px 0;
            border-bottom: 1px solid rgb(233, 233, 233);

            @media (max-width: 960px) {
                padding: 11px 0;
            }
        }

        .item-content:last-child {
            padding-bottom: 0;
            border-bottom: none;
        }

        .item-content:first-child {
            padding-top: 0;

            .item-title {
                font-weight: bold;
                font-size: 20px;

                @media (max-width: 960px) {
                    font-size: 16px;
                    line-height: 22px;
                }
            }
        }

        .item-desc {
            color: $color74;
        }
    }

    .recommend {
        margin-top: 30px;
        padding-left: 68px;

        @media (max-width: 960px) {
            margin-top: 19px;
            padding-left: 0;
        }

        img {
            width: 16px;
            height: 20px;
            object-fit: contain;

            @media (max-width: 960px) {
                width: 13px;
                height: 16px;
                margin-right: 14px;
            }
        }

        .top p {
            color: rgb(37, 37, 37);

            @media (max-width: 960px) {
                font-size: 16px;
                line-height: 22px;
            }
        }

        .el-button {
            margin-top: 18px;
            font-size: 16px;
            color: rgb(45, 112, 174);
            text-align: left;
            padding: 0;
            line-height: 22px;

            @media (max-width: 960px) {
                font-size: 14px;
                line-height: 20px;
                margin-top: 13px;
            }
        }

        .el-button + .el-button {
            margin-left: 0;
        }
    }

    .btn {
        width: 425px;
        height: 64px;
        background: rgb(45, 112, 174);
        color: white;
        font-size: 24px;
        border-radius: 8px;

        @media (max-width: 960px) {
            width: 259px;
            height: 42px;
            font-size: 16px;
            border-radius: 5px;
            margin-top: 20px;
        }
    }

    .btn:hover {
        box-shadow: 0 0 15px 0 rgb(117, 117, 117);
    }

    .btn:active {
        box-shadow: 0 0 10px 0 rgb(117, 117, 117);
    }

    .tip {
        margin-top: 25px;
        text-align: center;
        color: rgb(180, 180, 180);

        @media (max-width: 960px) {
            font-size: 12px;
            line-height: 17px;
            margin-top: 13px;
        }
    }

    .btn-export {
        margin-top: 80px;

        @media (max-width: 960px) {
            margin-top: 0;
        }
    }

    .course .content {
        margin-bottom: 35px;

        @media (max-width: 960px) {
            margin-bottom: 20px;
        }
    }

    .course .content:last-child {
        margin-bottom: 0;
    }
}
</style>
